<template>
  <div class="refundProcess-page">
    <c-title :hide="false" text="退款详情"></c-title>
    <div class="step">
      <van-steps :active="active">
        <van-step v-for="(item, index) in steps" :key="index">
          <h3>{{ item.text }}</h3>
          <p>{{ item.desc }}</p>
        </van-step>
      </van-steps>
    </div>
    <div class="mb20"></div>
    <div class="refund-content">
      <div class="refund-item flex-j-sb">
        <div>退款原因</div>
        <div>{{ refundDetail.reason }}</div>
      </div>
      <div class="refund-item flex-j-sb">
        <div>退款份数</div>
        <div>{{ refundDetail.order && refundDetail.order.goods_total }}份</div>
      </div>
      <div class="refund-item flex-j-sb">
        <div>退款金额<span class="explain">（平台优惠金额不可退款）</span></div>
        <div>￥{{ refundDetail.apply_price }}</div>
      </div>
      <div class="refund-item flex-j-sb mb-0">
        <div>退款方式</div>
        <div class="type">{{ refundDetail.refund_way_type_name }}</div>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="refund-content">
      <div class="refund-item flex-j-sb">
        <div>订单编号</div>
        <div class="refund-sn" v-clipboard:copy="refundDetail.refund_sn" v-clipboard:success="copyCode" v-clipboard:error="onError">
          {{ refundDetail.refund_sn }} <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/qrcode-copy.png" />
        </div>
      </div>
      <div class="refund-item flex-j-sb mb-0">
        <div>申请时间</div>
        <div>{{ refundDetail.create_time }}</div>
      </div>
    </div>
    <div class="mb20"></div>
    <div class="refund-content" v-if="refundDetail.reject_reason">
      <div>驳回原因</div>
      <div class="refund-item flex-j-sb">
        {{ refundDetail.reject_reason }}
      </div>
    </div>
  </div>
</template>
<script>
import refundProcess_controller from "./refundProcess_controller.js";
export default refundProcess_controller;
</script>
<style scoped>
.refundProcess-page ::v-deep .van-step--process {
  text-align: left;
}

.refundProcess-page ::v-deep .van-step--horizontal .van-step__circle-container {
  top: 44px;
  padding: 0 0.5rem 0 0;
}

.refundProcess-page ::v-deep .van-step--process .van-step__circle-container {
  top: 44px;
  padding: 0 0 0 0.5rem;
}

.refundProcess-page ::v-deep .van-step--horizontal .van-step__line {
  top: 44px;
}

/* .van-step__title  */

/* .refundProcess-page ::v-deep .van-step__title p {
  padding-bottom: 10px;
  line-height: 30px;
} */
.refundProcess-page ::v-deep .van-step--finish {
  text-align: left;
}
</style>
<style lang="scss" scoped>
.mb20 {
  height: 0.625rem;
  clear: both;
}

.refundProcess-page {
  .refund-content .mb-0 {
    margin-bottom: 0;
  }

  margin: 0.625rem 0.625rem 0 0.625rem;
}

.step {
  padding: 1.2188rem 1.125rem 1.25rem 1.125rem;
  background-color: #fff;
}

.refund-content {
  background-color: #fff;
  padding: 1.0938rem 0.7813rem;
  border-radius: 0.3125rem;

  .refund-item {
    margin-bottom: 1.75rem;

    div {
      color: #222;
      font-size: 0.875rem;
    }
  }
}

.refund-item {
  .explain {
    font-size: 0.6875rem;
    color: #767676;
  }

  .type {
    font-size: 0.875rem;
    color: #4e4d55;
  }

  .refund-sn img {
    width: 0.8125rem;
    height: 0.75rem;
    margin-left: 0.4063rem;
  }
}
</style>
